<template>
	<div id="ForgetPass">
		<x-header :left-options="{showBack: false}" title="找回密码" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="submit">
			<div class="intro">
				<b>+86</b>
				<x-input type="number" v-model="mobile" :show-clear="false" name="mobile" placeholder="请输入手机号" keyboard="number" is-type="china-mobile"></x-input>
			</div>
			<input type="number" v-model="sms_code" placeholder="请输入验证码" />
			<span @click="verify()">{{btntxt}}</span>
			<input v-model="passwords" type="text" placeholder="设置新密码 ( 7-20 位字母与数字组合)" />
			<input v-model="repasswords" type="text" placeholder="再次输入新密码" />
		</div>
		<button @click="submits()">提交</button>
		<toast v-model="success" type="text" width='5.5rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, XInput, Toast } from 'vux'
	export default {
		data() {
			return {
				mobile: '',
				repasswords: '',
				success: false,
				msg: '',
				btntxt: "获取验证码",
				times: 0,
				passwords: '',
				sms_code: ''
			}
		},
		components: {
			XHeader,
			XInput,
			Toast
		},
		methods: {
			//手机验证码部分
			timer: function() {
				if(this.times > 0) {
					this.times--;
					this.btntxt = this.times + "s后重新获取";
					setTimeout(this.timer, 1000);
					this.disabled = true;
				} else {
					this.times = 0;
					this.btntxt = "点击获取";
					this.disabled = false;
				}
			},
			//点击获取验证码
			verify: function() {
				console.log(this.mobile);
				var reg1 = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(this.times > 0) {
					return
				} else if(this.mobile == '') {
					this.success = !this.success;
					this.msg = '手机号不为空';
				} else if(!reg1.test(this.mobile)) {
					this.success = !this.success;
					this.msg = '手机号不合法';
				} else {
					this.times = 60;
					this.timer();
					let params = {
						tel: this.mobile
					};
					this.$http({
						method: 'POST',
						url: '/los/api/member/sms_verify.json',
						data: params
					}).then((result) => {
						this.success = !this.success;
						this.msg = result.data.msg;
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			submits: function() {
				let params = {
					member_mobile: this.mobile,
					sms_code: this.sms_code,
					member_pwd: this.passwords
				}
				console.log(params);
				var pattern = /^[a-zA-Z0-9]{7,20}$/;
				if(this.mobile == '') {
					this.success = !this.success;
					this.msg = '手机号不能为空';
				} else if(this.passwords == '') {
					this.success = !this.success;
					this.msg = '密码不能为空';
				} else if(this.passwords != this.repasswords) {
					this.success = !this.success;
					this.msg = '两次密码不一致';
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/member/repwd.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							setTimeout(function() {
								location.href = '#/Login'
							}, 1000)
						} else {
							this.success = !this.success;
							this.msg = result.data.msg;
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	#ForgetPass {
		background: #fff;
		width: 100%;
		height: 100%;
	}
	
	.header {
		background: #fff;
	}
	
	.submit {
		padding: 0 0.45rem;
		position: relative;
	}
	
	.submit .intro {
		overflow: hidden;
		border-bottom: solid 1px #f3f3f3;
	}
	
	.submit .intro b {
		font-weight: normal;
		float: left;
		height: 1.52rem;
		line-height: 1.52rem;
		color: #333;
		font-size: 0.42rem;
	}
	
	.submit .intro input {
		width: 86%;
		float: left;
		margin-left: 0.53rem;
		border: none;
	}
	
	.submit input {
		font-size: 0.4rem;
		color: #333;
		width: 100%;
		height: 1.52rem;
		line-height: 1.52rem;
		border-bottom: 1px solid #f3f3f3;
	}
	
	input::-webkit-input-placeholder {
		color: #ccc;
	}
	
	.submit span {
		position: absolute;
		right: 0.45rem;
		top: 1.52rem;
		height: 1.52rem;
		line-height: 1.52rem;
		font-size: 0.4rem;
		/*color: #ccc;*/
		color: #a30000;
	}
	
	button {
		width: 8.93rem;
		height: 1.17rem;
		background: #a30000;
		/*opacity: 0.3;*/
		display: block;
		text-align: center;
		margin: 1.06rem auto 0;
		border: none;
		color: #fff;
		border-radius: 0.1rem;
		font-size: 0.48rem;
	}
</style>